<template>
  <div id="ContrastTable" v-if="selectedCollegeListData.length > 0">
    <el-checkbox-group v-model="collegeCheckList" class="checkbox-box" :max="6">
      <div
        v-for="(item, index) in selectedCollegeListData"
        :key="item.code"
        class="df contaier"
        style="
          justify-content: space-between;
          margin-top: 20px;
          margin-bottom: 20px !important;
        "
      >
        <el-checkbox :label="item.code" :value="item.code" size="large">
          <template #default>
            <div class="df">
              <img class="item-img" :src="item.logoUrl" alt="" />
              <div style="width: 250px">
                <div class="cnName-box curpoin" style="font-size: 20px">
                  {{ item.cnName }}
                </div>
                <div class="df f12" style="margin: 10px 0; flex-wrap: wrap">
                  <div
                    v-for="chil in item.features"
                    :key="chil"
                    style="margin-bottom: 5px"
                    class="chil-item"
                  >
                    {{ chil }}
                  </div>
                </div>
                <div class="f12">
                  {{ item.provinceName }}&nbsp;{{ item.cityName }} /
                  {{ item.natureTypeName }} / {{ item.categories[0] }} /
                  {{ item.belong }}
                </div>
              </div>
              <div
                class="rank-box f12"
                style="margin-right: 100px; color: #666"
              >
                <div>排名</div>
                <div style="margin: 10px 0">
                  第{{ item.ranking }} / 综合指数{{ item.comScore }}
                </div>
              </div>
              <div class="heat f12" style="color: #666">
                <div>热度</div>
                <div style="margin: 10px 0">
                  {{ (item.hits / 10000).toFixed(1) }}万
                </div>
              </div>
            </div>
          </template>
        </el-checkbox>
        <div class="my-btn f14 curpoin" @click="handleDelete(item, index)">
          <el-button link class="delete-btn">删除</el-button>
        </div>
      </div>
    </el-checkbox-group>

    <el-button
      @click="handleCheckContrst"
      type="primary"
      class="height40"
      style="
        background-color: var(--background-color);
        position: fixed;
        right: left;
        bottom: 0;
        width: 860px;
      "
      ><span
        >开始对比（以选择{{ collegeCheckList.length }}/{{
          selectedCollegeListData.length
        }}）</span
      >
    </el-button>
  </div>
  <div v-else class="nodata">
    暂无对比数据，<span
      class="curr"
      style="color: var(--color-text)"
      @click="handleGoCollege"
      >前去添加</span
    >
  </div>
</template>

<script setup>
import { computed, ref } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import bus from '../../../../utils/bus';
const emits = defineEmits(['handleGoSearchCollege']);
const store = useStore();
const collegeCheckList = ref([]);
const route = useRouter();
const selectedCollegeListData = computed(
  () => store.getters.searchCollege.selectedCollege,
);
const handleCheckContrst = () => {
  if (collegeCheckList.value.length < 2) {
    ElMessage({
      message: '请选择至少两个院校',
      type: 'warning',
    });
    return;
  } else {
    let foundItems = store.getters.searchCollege.selectedCollege.filter(
      (item) => collegeCheckList.value.includes(item.code),
    );
    let checkedCollList = [];
    foundItems.forEach((v) => {
      checkedCollList.push(v.code);
    });
    localStorage.setItem('checkedCollege', JSON.stringify(checkedCollList));
    localStorage.setItem('compareList', JSON.stringify(foundItems));
    route.push('/collegeCompare');
  }
};
const handleGoCollege = () => {
  emits('handleGoSearchCollege', '1');
};
const handleDelete = (item, index) => {
  collegeCheckList.value = collegeCheckList.value.filter(
    (code) => code !== item.code,
  );
  store.dispatch('searchCollege/removeCollegeList', index);
  bus.emit('handleLikeList', item.code);
};
</script>

<style lang="scss" scoped>
#ContrastTable {
  width: 70%;
  margin-bottom: 50px;
  .contaier {
    height: 120px;
    .item-img {
      width: 50px;
      margin: 15px 15px;
    }
    .chil-item {
      margin-right: 5px;
      padding: 2px 5px;
      border: 1px solid #d3d4d6;
      border-radius: 4px;
      color: #909399;
    }
    .cnName-box:hover {
      color: var(--color-text);
    }
    .my-btn {
      .delete-btn {
        color: var(--color-text);
      }
    }
  }
}
.nodata {
  text-align: center;
  margin: 200px;
  color: #909399;
}
</style>
